`<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <div class="filter-container">
        <el-button-group>
          <el-button @click="handlerAdd"
                     icon="plus"
                     size="small" type="primary"
                     v-if="sys_dept_edit">添加
          </el-button>
          <el-button @click="handlerEdit"
                     icon="edit" size="small"
                     type="primary"
                     v-if="sys_dept_edit">编辑
          </el-button>
          <el-button @click="handleDelete"
                     icon="delete" size="small"
                     type="primary"
                     v-if="sys_dept_del">删除
          </el-button>
        </el-button-group>
      </div>

      <el-row>
        <el-col :span="8"
                style='margin-top:15px;'>
          <el-tree :data="treeDeptData"
                   :expand-on-click-node="false"
                   :filter-node-method="filterNode"
                   @node-click="getNodeData"
                   class="filter-tree"
                   default-expand-all
                   highlight-current
                   node-key="id">
          </el-tree>
        </el-col>
        <el-dialog :visible.sync="dialogDeptVisible" title="选择父级节点">
          <el-tree :data="treeDeptSelectData" @node-click="clickNodeSelectData" check-strictly class="filter-tree"
                   default-expand-all highlight-current node-key="id" ref="selectParentDeptTree">
          </el-tree>
        </el-dialog>
        <el-col :span="16"
                style='margin-top:15px;'>
            <el-form :label-position="labelPosition"
                     :model="form"
                     :rules="rules"
                     label-width="80px"
                     ref="form">

              <el-form-item label="父级节点" prop="parentName">
                <el-input :disabled="formEdit" @focus="handleParentDeptTree()" placeholder="选择父级节点"
                          readonly v-model="form.parentName">
                </el-input>
                <input type="hidden" v-model="form.parentId"/>
              </el-form-item>

              <el-form-item label="节点编号"
                            prop="deptId"
                            v-if="formEdit">
                <el-input :disabled="formEdit"
                          placeholder="节点编号"
                          v-model="form.deptId"></el-input>
              </el-form-item>
              <el-form-item label="部门名称"
                            prop="name">
                <el-input :disabled="formEdit"
                          placeholder="请输入名称"
                          v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="排序"
                            prop="orderNum">
                <el-input :disabled="formEdit"
                          placeholder="请输入排序"
                          type="number"
                          v-model="form.sort"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input :disabled="formEdit" placeholder="" type="textarea" v-model="form.description"></el-input>
              </el-form-item>
              <el-button @click="save" size="small"
                         type="primary">保存
              </el-button>
              <el-button @click="onCancel" size="small">取消</el-button>
            </el-form>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
  import deptService from './dept-service'
  import {mapGetters} from 'vuex'

  export default {
    name: 'dept',
    data() {
      return {
        dialogDeptVisible: false,
        list: null,
        total: null,
        formEdit: true,
        formAdd: true,
        formStatus: '',
        showElement: false,
        treeDeptData: [],
        treeDeptSelectData: [],
        rules: {
          parentId: [
            {required: true, message: '请输入父级节点', trigger: 'blur'}
          ],
          deptId: [
            {required: true, message: '请输入节点编号', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入部门名称', trigger: 'blur'}
          ],
        },
        labelPosition: 'right',
        form: {
          name: undefined,
          orderNum: undefined,
          parentId: undefined,
          deptId: undefined,
          description: undefined
        },
        currentId: 0,
        sys_dept_edit: false,
        sys_dept_del: false
      }
    },
    created() {
      this.getList();
      this.sys_dept_edit = this.permissions['sys_dept_edit'];
      this.sys_dept_del = this.permissions['sys_dept_del']
    },
    computed: {
      ...mapGetters([
        'elements',
        'permissions'
      ])
    },
    methods: {
      getList() {
        deptService.fetchTree().then(response => {
          this.treeDeptData = response.data
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1
      },
      getNodeData(data) {
        if (!this.formEdit) {
          this.formStatus = 'update'
        }
        deptService.get(data.id).then(response => {
          this.form = response.data
        });

        this.currentId = data.id;
        this.showElement = true
      },
      clickNodeSelectData(data) {
        this.form.parentId = data.id;
        this.form.parentName = data.label;
        this.dialogDeptVisible = false;
      },
      handleParentDeptTree() {
        fetchTree({extId: this.form.id}).then(response => {
          this.treeDeptSelectData = response.data;
          this.dialogDeptVisible = true;
          setTimeout(() => {
            this.$refs['selectParentDeptTree'].setCurrentKey(this.form.parentId ? this.form.parentId : null);
          }, 100)
        })
      },
      handlerEdit() {
        if (this.form.id) {
          this.formEdit = false;
          this.formStatus = 'update'
        }
      },
      handlerAdd() {
        this.resetForm();
        this.formEdit = false;
        this.formStatus = 'create'
      },
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deptService.remove(this.currentId).then(response => {
            this.getList();
            this.resetForm();
            this.onCancel();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) return;
          deptService.save(this.form).then(response => {
            this.getList()
          })
        })
      },
      onCancel() {
        this.formEdit = true;
        this.formStatus = ''
      },
      resetForm() {
        this.form = {
          parentId: this.currentId,
        }
      }
    }
  }
</script>

